<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景样式</title>
    <style>
        div {
            width: 300px;
            height: 300px;
        }

        .c1 {
            background-color: red;
        }

        .c2 {
            background-color: green;
            background-image: url("../images/heihei.gif");
            background-repeat: no-repeat;
            background-position-x: center;
            background-position-y: 50%;
        }

        /*.c3{*/
        /*    width: 800px;*/
        /*    height: 800px;*/
        /*    background-color: blue;*/
        /*    !*background-image: url("../images/heihei.gif");*!*/
        /*    background-image: url("../images/3.jpg");*/
        /*    background-repeat: no-repeat;*/
        /*    !*background-position: right top;*!*/
        /*    background-position: 20% 60%;*/
        /*    !*background-attachment: fixed;*!*/
        /*}*/
        .c3 {
            background: blue url("../images/heihei.gif") no-repeat left top;
        }
    </style>
</head>
<body>
<div class="c1"></div>
<hr>
<div class="c2"></div>
<hr>
<div class="c3"></div>
</body>
</html>